<template>
  <div id="app">
    <!--header-->
    <headerBar></headerBar>
    <!--header end-->
    <div class="main-body">
      <el-row :gutter="20">
        <el-col :span="3"><div class="grid-content body-left">
          <navMenu></navMenu>
        </div></el-col>
        <el-col :span="21"><div class="grid-content body-right">
          <router-view></router-view>
        </div></el-col>
      </el-row>
    </div>
    <!--footer-->
    <footer>
      im footer
    </footer>
    <!--footer end-->

  </div>
</template>

<script>
  import navMenu from './components/navMenu/navMenu'
  import headerBar from './components/headerBar/headerBar'
  export default {
    name: 'app',
    components : {
      navMenu,headerBar
    }
  }
</script>

<style>
   /* reset */
  html{color:#000;background:#fff;}
  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
  body{font:12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;}
  img{border:none;}
  em,strong{font-style:normal;font-weight:normal;}
  li{list-style:none;}
  table {border-collapse:collapse;border-spacing:0;}
  h1{font-size:18px;}
  h2{font-size:16px;}
  h3{font-size:14px;}
  h4, h5, h6{font-size:100%;}

  q:before,q:after{content:'';}/* 消除q前后的内容 */
  button,input,select,textarea{font-size:100%;}/* 使得表单元素在 ie 下能继承字体大小 */
  input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
  address,cite,dfn,em,var{font-style:normal;} /* 将斜体扶正 */
  font-family: "Microsoft YaHei","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","微软雅黑",Arial,sans-serif;

  /* link */
  a{text-decoration:none;}

  i{
    margin: 0 2px;
  }
  /* start */
  #app{
    display: flex;
    flex-flow: column;
    min-height: 100vh;
  }
  .main-body{
    flex: 1;
    overflow: hidden;
  }
  .main-body .body-left{
    height: 100%;
    overflow:hidden;
    padding-bottom:9999px;
    margin-bottom:-9999px;
    background: #1f2d3d;
    border-radius: 0px;
  }
  .main-body .body-right{
    padding-top: 10px;
    padding-right: 24px;
  }
  footer{
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #1f2d3d;
    color: #bfcbd9;
  }

  /* float */
  .overflow-clear{
    overflow: auto;
  }
  .float-left{
    float:left;
  }
  .float-right{
    float:right;
  }
  .full-line{
    width:100%;
  }
  .paging {
    margin-top: 16px;
    text-align: center;
  }

  .table-title-before {
    font-size:20px;
    line-height:2em;
    font-family: "Microsoft YaHei";
  }
  /* breadcrumb margin 4px */
  .breadcrumb-bottom{
    margin-bottom: 16px;
  }
</style>
